<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
</head>
<body>
<div id="app">
    <!-- 路由渲染器 -->
    <router-view />
</div>
<script src="./data.js"></script>
<script src="../20211018/vue.js"></script>
<!-- 路由 -->
<script src="../vue-router.js"></script>
<script>
      console.log(data)
    // 路由跳转
    // router-link   ----  声明式
    // 编程式跳转
    // path + query    ------ get请求
    // name + params   ------ post请求

    // 路由传参
    let comA = {
        template: `
            <div>
                <div>这是comA组件</div>
                <router-link to="/comB">跳转到B</router-link>
                <button @click="comAclick">跳转到B</button>
            </div>
        `,
        data () {
            return {
                objA: {
                    userName: 'tom',
                    age: '18',
                    height: 180
                }
            }
        },
        methods: {
            comAclick () {
                // path+query
                // this.$router.push({
                //     path: '/comB',
                //     query: this.objA
                // })

                // name+params
                this.$router.push({
                    name: 'comB',
                    params: this.objA
                })
                // this.$router.replace('/comB')
            }
        }
    }
    let comB = {
        template: `
            <div>
                <div>这是comB组件</div>
                <router-link to="/comC">跳转到C</router-link>
                <button @click="comBclick">跳转到A</button>
                <button @click="getQuery">获取query参数</button>

            </div>
        `,
        mounted () {
            // console.log(window.location.href.slice(window.location.href.indexOf('?') + 1))
        },
        methods: {
            comBclick () {
                this.$router.push({
                    path: '/comC'
                    // name: 'comA'
                })
            },
            getQuery () {
                console.log(this.$route.params)
                console.log(this.$route.query)
            }
        }
    }
    let comC = {
        template: `
            <div>
                <div>这是comC组件</div>
                <router-link to="/comA">跳转到A</router-link>
                <button @click="comCclick">跳转到A</button>
            </div>
        `,
        methods: {
            comCclick () {
                this.$router.push({
                    path: '/comA'
                })
            }
        }
    }

    // 创建路由实例
    let router = new VueRouter({
        // 路由列表
        routes: [
            {path: '/', component: comA},
            {path: '/comA', name: 'comA', component: comA},
            {path: '/comB', name: 'comB', component: comB},
            {path: '/comC', name: 'comC',  component: comC}
        ]
    })

    let myApp = new Vue({
        el: '#app',
        router,
        // components: {
        //     comA: comA,
        //     comB: comB,
        //     comC: comC
        // },
        data: {
        }
    })
</script>
</body>
</html>